'use client'

import { Link } from '@/src/navigation'
import Image from 'next/image'
import { useSkeletonAnimation } from '../hooks/useSkeleton'

import arrowBlackIcon from '@/public/arrow_right_black.png'

interface HeroProps {
  sliders: Slider[]
  children?: React.ReactNode
  isHome?: boolean
  productId?: string
  buttonLabel?: string
}

const Hero: React.FC<HeroProps> = (props) => {
  const {
    sliders,
    children,
    isHome = false,
    productId,
    buttonLabel = '',
  } = props

  const skeletonAnimation = useSkeletonAnimation()

  return (
    <div className='relative'>
      <Image
        src={sliders[0].image || ''}
        alt='123'
        style={{ objectFit: 'cover' }}
        fill
        sizes='100vw'
        placeholder={skeletonAnimation}
      />
      <div className='z-10 absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-b from-black opacity-80' />
      <div className='z-20 relative w-screen h-[62.4vw] flex flex-col justify-center px-[0.9375rem] lg:px-0 lg:max-w-[960px] lg:mx-auto lg:h-[34.5rem] lg:pt-[5rem] 2xl:max-w-[1200px] 2xl:h-[51.75rem] 2xl:pt-[7.5rem]'>
        {children ? (
          children
        ) : (
          <>
            {isHome && <div className='h-6 lg:h-18' />}
            {isHome && (
              <>
                <div className='text-[0.75rem] leading-[1.125rem] text-white max-w-[16rem] lg:max-w-[23.75rem] 2xl:text-[1.125rem] 2xl:leading-[2rem]'>
                  {sliders[0].stitle}
                </div>
                <div className='h-1 lg:h-3' />
              </>
            )}
            <h1 className='uppercase text-[0.9375rem] leading-[1.25rem] font-bold text-white lg:text-[2rem] lg:leading-[2.4rem] 2xl:text-[3.125rem] 2xl:leading-[4rem]'>
              {sliders[0].title || 'Unknown Title'}
            </h1>
            {isHome && <div className='h-3 lg:h-9' />}
            <div className='h-1 lg:h-3' />
            <div className='text-[0.75rem] leading-[1.125rem] text-white max-w-[16rem] lg:max-w-[23.75rem] 2xl:text-[1.125rem] 2xl:leading-[2rem]'>
              {sliders[0].con || 'Unknown Description'}
            </div>
            {isHome && <div className='h-3 lg:h-9' />}
            {isHome && (
              <div className='flex'>
                <Link
                  href={`/product-detail/${sliders[0].cpid.toString()}`}
                  className='flex justify-center items-center px-[0.96875rem] py-[0.8125rem] bg-white lg:px-[1.6875rem] lg:py-[1.0625rem] 2xl:px-[2.53125rem] 2xl:py-[1.59375rem] hover:bg-gray-200 transition-colors duration-200'
                >
                  <div className='text-black text-[0.875rem] leading-[0.875rem] font-medium lg:text-[1rem] lg:leading-[1rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'>
                    {buttonLabel}
                  </div>
                  <div className='w-[0.59375rem] lg:w-4 2xl:w-6' />
                  <div className='relative w-[0.59375rem] h-[0.53125rem] lg:w-[0.8125rem] lg:h-[0.6875rem] 2xl:w-[1.21875rem] 2xl:h-[1.03125rem]'>
                    <Image
                      src={arrowBlackIcon}
                      alt='arrow icon'
                      fill
                      sizes='(max-width: 1024px) 0.59375rem'
                    />
                  </div>
                </Link>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
}

export default Hero
